<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
</head>
<body>
<div class="layui-form timo-compile">
    <form th:action="@{/mains/banner/update}" method="post">

        <input type="hidden" name="banId" th:value="${banner.id}">
        <div class="layui-form-item">
            <label class="layui-form-label required">banner名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="names" placeholder="请输入名称" th:value="${banner.names}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否跳转</label>
            <div class="layui-input-inline">
                <select name="forwards" lay-verify="required" id="forwards" lay-filter="forwards">
                    <option value="0" th:selected="${banner.forwards==0}">不跳转</option>
                    <option value="1" th:selected="${banner.forwards==1}">跳转</option>
                </select>
            </div>
        </div>
        <th:block th:if="${banner.forwards==1}">
            <div class="layui-form-item forwardT" >
                <label class="layui-form-label">跳转类型</label>
                <div class="layui-input-inline">
                    <select name="kinds" id="kinds" lay-filter="kinds">
                        <option value="0" th:selected="${banner.kinds==0}">外部链接</option>
                        <option value="1" th:selected="${banner.kinds==1}">小程序页</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item forwardT">
                <label class="layui-form-label">跳转地址</label>
                <div class="layui-input-inline">
                    <input class="layui-input imgLinks" type="text" name="imgLinks" th:value="${banner.imgLinks}" placeholder="请输入跳转地址">
                </div>
            </div>
        </th:block>
        <th:block th:if="${banner.forwards==0}" >
            <div class="layui-form-item forwardT" style="display: none">
                <label class="layui-form-label">跳转类型</label>
                <div class="layui-input-inline">
                    <select name="kinds" lay-filter="kinds">
                        <option value="0" selected="selected">外部链接</option>
                        <option value="1">小程序页</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item forwardT" style="display: none">
                <label class="layui-form-label">跳转地址</label>
                <div class="layui-input-inline">
                    <input class="layui-input imgLinks" type="text" name="imgLinks" placeholder="请输入跳转地址">
                </div>
            </div>
        </th:block>
        <div class="layui-upload layui-form-item">
            <label class="layui-form-label required">Banner图片</label>
            <button type="button" class="layui-btn" id="maxPic" ><i class="layui-icon"></i>上传图片</button>
            <div id="max-show" class="upload-show">
                <div class="upload-item">
                    <img th:src="${banner.imgUrl}">
                    <i class='upload-item-close layui-icon layui-icon-close'></i>
                </div>
            </div>
            <input type="hidden" id="maxPicName" name="imgUrl" th:value="${banner.imgUrl}">
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" th:text="${banner.remark}"></textarea>
            </div>
        </div>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript">
    // 树形菜单
    layui.use(['form','upload'],function () {
        var form = layui.form, upload = layui.upload;


        form.on('select(forwards)',function(data){
            var forwards = data.value;
            if(forwards==1){
                $(".forwardT").show()
            } else {
                $(".forwardT").hide();
            }
        });

        form.on('select(kinds)',function(data){
            var kinds = data.value;
            if(kinds==1){
                $(".imgLinks").val("pages/login/login")
            } else {
                $(".imgLinks").val("http://www.baidu.com");
            }
        });


        var maxPicUP = upload.render({
            elem: '#maxPic'
            ,url: '/mains/banner/upload'
            ,field: 'image' //文件域的字段名
            ,acceptMime: 'image/*' //选择文件类型
            ,exts: 'jpg|jpeg|png|gif' //支持的图片格式
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load('图片正在上传中，请稍后......',{icon: 16,time:false,shade:0.8}); //上传loading
            }
            ,choose: function (obj) {
                obj.preview(function (index, file, result) {
                    var upload = $('#maxPic');
                    var show = upload.parents('.layui-form-item').children('#max-show');
                    show.append("<div class='upload-item'><img src='"+ result +"'/>" +
                        "<i class='upload-item-close layui-icon layui-icon-close'></i></div>");
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code ==400){
                    layer.closeAll('loading'); //关闭loading
                    return layer.msg('上传失败');
                }
                layer.closeAll('loading'); //关闭loading
                console.log(res.data);
                $("#maxPicName").val(res.data);
                //上传成功

            }
            ,error: function(index, upload){
                layer.closeAll('loading');
                return layer.msg('上传失败');
            }
        });
    })
</script>
</body>
</html>